<template>
  <div>

    <x-header style="width:100%;position:absolute;left:0;top:0;z-index: 2;" class="head-gree">
      <span>{{title}}</span>
    </x-header>

    <group label-width="4.5em" label-margin-right="2em" title="必填(密码不能少于6位)">
      <x-input title="姓名" v-model="username" v-focus="true" placeholder="请输入姓名" required></x-input>
      <x-input title="账号" v-model="useraccount" placeholder="请输入登录账号" required></x-input>
      <x-input title="密码" type="password" placeholder="" v-model="userpassword" :min="6" :max="12" @on-change="change" placeholder="请设置密码"></x-input>
      <x-input title="确认密码" v-model="userpassword2" type="password" placeholder="" :equal-with="userpassword" placeholder="再次输入密码"></x-input>
    </group>

    <group label-width="4.5em" label-margin-right="2em" title="选填">
      <selector ref="defaultValueRef" title="性别" :options="list" v-model="sex "></selector>
      <x-input title="年龄" type="number" v-model="eage" placeholder="请输入年龄"></x-input>
    </group>
    <group label-width="4.5em" label-margin-right="2em" >
      <group-title slot="title">详细信息(选填)</group-title>
      <x-input title="联系方式" type="tel" v-model="phone" placeholder="请输入手机号"></x-input>
      <x-address title="地址选择" v-model="addressValue" raw-value :list="addressData" value-text-align="left"></x-address>
    </group>
    <group label-width="4.5em" label-margin-right="2em" >
      <group-title slot="title">本站<a href="" class="an-link">《协议条款》</a><span style="float:right;"></span></group-title>
      <x-switch title="同意" v-model="value1"></x-switch>
    </group>
    <box gap="20px 10px">
      <x-button type="primary" @click.native.stop="submint" :disabled="!value1" :show-loading="loading">提交</x-button>
    </box>


    <toast v-model="msgShow" type="text" >{{ msg }}</toast>

  </div>
</template>

<script>
  import {XHeader, GroupTitle, Box, Group,Selector, XInput, PopupPicker,  ChinaAddressData, XAddress, XSwitch,XButton,Toast   } from 'vux'
  import {register } from '@/api/data'
    export default {
      name: "regis",
      components: {
        XHeader,
        Box,
        Group,
        GroupTitle,
        Selector,
        XInput,
        PopupPicker,
        XAddress,
        XSwitch,
        XButton,
        Toast,
      },
      data () {
        return {
          title:'注册',
          username:'', //姓名
          useraccount:'', //账号
          userpassword:'',  //密码
          userpassword2:'',
          addressData: ChinaAddressData,
          addressValue: [],
          eage:'18',
          phone:'',
          sex : '1',
          list: [{key: '1', value: '男'}, {key: '0', value: '女'}],
          value1:false,  //是否同意条款
          loading:false,
          msgShow:false, //提示是否显示
          msg:'', //提示信息
        }
      },
      methods:{
        submint(){
          console.log('提交数据1');
          this.value1 = false;
          this.loading = true;
          setTimeout(()=>{
            this.loading = false;
          },2000);
          let nd = {
            useraccount:this.useraccount,
            username:this.username,
            userpassword:this.userpassword,
            sex:this.sex,
            age:this.eage,
            useraddress:JSON.stringify(this.addressValue),
            userphone:this.phone,
          };
          if(this.useraccount==''&&this.username==''&&this.userpassword2==''){
            this.msgShow = true;
            this.msg = '必填项不能为空！';
          }else{
            register(nd).then(res=>{
              this.loading = false;
              this.value1 = true;
              console.log(res);
            })
          }

        },
        change (val) {
          console.log('on change', val)
        },
        clerboth(){
          this.addressValue = '';
          this.username = '';
          this.eage = '';
          this.IdNumber = '';
          this.phone = '';
          this.list = '';
        }
      }
    }
</script>

<style scoped>

</style>
